<template>
  <div id="app">
    <router-view v-if="!hasError" />
    <div v-else class="error-fallback">
      <h1>页面加载出错</h1>
      <p>{{ errorMessage }}</p>
      <el-button @click="reload">重新加载</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onErrorCaptured } from 'vue'

const hasError = ref(false)
const errorMessage = ref('')

onErrorCaptured((error: any) => {
  console.error('应用错误:', error)
  hasError.value = true
  errorMessage.value = error.message || '未知错误'
  return false
})

const reload = () => {
  window.location.reload()
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background-color: #f0f2f5;
  overflow: hidden;
}

#app {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.error-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-align: center;
  padding: 20px;
}

.error-fallback h1 {
  font-size: 24px;
  margin-bottom: 16px;
}

.error-fallback p {
  font-size: 16px;
  margin-bottom: 24px;
  opacity: 0.8;
}
</style>
